<template>
  <div :id="pos"></div>
</template>

<script setup>
import { reactive, getCurrentInstance,onMounted,nextTick  } from 'vue'
// defineProps 用来接收父组件传来的 props ; defineEmits 用来声明触发的事件
const { pos, width, height,isEcharts4 } = defineProps({
  pos: {
    type: String,
    required: true
  },
  width: {
    type: String,
    default: '320'
  },
  height: {
    type: String,
    default: '140'
  },
  isEcharts4: {
    type: [Number, String],
    default: 0
  }
})
// console.log(height,'height');
const emit = defineEmits(['getMychart'])

const { appContext : { config: { globalProperties } } } = getCurrentInstance()
const echarts = globalProperties.$echarts
const echarts4 = globalProperties.$echarts4


onMounted(() => {
  nextTick(() => {
    const box = document.getElementById(pos)
    // console.log(pos,box)
    box.style.width = width + "px"
    box.style.height = height + "px"
    let myChart
    // 若 isEcharts4
    if (isEcharts4) {
      myChart = reactive(echarts4.init(box))
    } else {
      myChart = reactive(echarts.init(box))
    }
    // 给父组件传值
    emit('getMychart', [myChart,pos])
    window.onresize = function () {
      myChart.resize()
    }
  })

})

</script>

<style lang="scss" scoped></style>